<!--
/**
 * @fileoverview Header component
 * @license MIT
 * @author Rafal Pospiech <neuronet.io@gmail.com>
 * @package GanttElasticHeader
 */
-->
<template>
  <div class="gantt-elastic__header" :style="{ ...style['header'] }">
    <div
      class="gantt-elastic__header-title"
      :style="{ ...style['header-title'] }"
    >
      <div
        class="gantt-elastic__header-title--text"
        :style="{ ...style['header-title--text'] }"
        v-if="!opts.title.html"
      >
        {{ opts.title.label }}
      </div>
      <div
        class="gantt-elastic__header-title--html"
        :style="{ ...style['header-title--html'] }"
        v-if="opts.title.html"
        v-html="opts.title.label"
      ></div>
    </div>
    <div
      class="gantt-elastic__header-options"
      :style="{ ...style['header-options'] }"
    >
      <el-button
        class="gantt-elastic__header-btn-recenter"
        :style="{ ...style['header-btn-recenter'] }"
        @click.prevent="recenterPosition"
      >
        {{ opts.locale.Now }}
      </el-button>
      <!-- <label
        class="gantt-elastic__header-label"
        :style="{ ...style['header-label'] }"
      >
        {{ opts.locale["X-Scale"] }}
        <div
          class="gantt-elastic__header-slider-wrapper"
          :style="{ ...style['header-slider-wrapper']}"
        >
            <i class="el-icon-remove-outline"  @click="scale-=.3"></i>
          <vue-slider
            class="gantt-elastic__header-slider"
            tooltip="none"
            :style="{ ...style['header-slider'],'display':'inline-block' }"
            :process-style="{ ...style['header-slider--process'] }"
            :slider-style="{ ...style['header-slider--slider'] }"
            v-model="scale"
            :max="30"
            :min="7"
            width="100px"
          ></vue-slider>
          <i class="el-icon-circle-plus-outline" @click="scale+=.3"></i>
        </div>
      </label> -->
      <label
        class="gantt-elastic__header-label"
        :style="{ ...style['header-label'] }"
      >
        {{ opts.locale["X-Scale"] }}
        <el-select name="X-Scale" v-model="scale" @change="handleScaleChange" size="mini" style="width:100px">
          <!-- <el-option value="day" label="天">天</el-option> -->
          <el-option value="week" label="周">周</el-option>
          <el-option value="month" label="月">月</el-option>
          <el-option value="quarter" label="季度">季度</el-option>
          <!-- <el-option value="year" label="年">年</el-option> -->
        </el-select>
      </label>
      
      <label
        class="gantt-elastic__header-label"
        :style="{ ...style['header-label'] }"
      >
        {{ opts.locale["Y-Scale"] }}
        <el-select name="Y-Scale" v-model="height" size="mini" style="width:100px">
          <el-option :value="16" label="0.8倍">0.8倍</el-option>
          <el-option :value="20" label="1倍">1倍</el-option>
          <el-option :value="30" label="1.5倍">1.5倍</el-option>
          <el-option :value="40" label="2倍">2倍</el-option>
        </el-select>
      </label>
      <!-- <label
        class="gantt-elastic__header-label"
        :style="{ ...style['header-label'] }"
      >
        {{ opts.locale["Y-Scale"] }}
        <div
          class="gantt-elastic__header-slider-wrapper"
          :style="{ ...style['header-slider-wrapper'] }"
        >
          <vue-slider
            class="gantt-elastic__header-slider"
            tooltip="none"
            :style="{ ...style['header-slider'] }"
            :process-style="{ ...style['header-slider--process'] }"
            :slider-style="{ ...style['header-slider--slider'] }"
            v-model="height"
            :max="100"
            :min="7"
            width="100px"
          ></vue-slider>
        </div>
      </label> -->
      
      <label
        class="gantt-elastic__header-label"
        :style="{ ...style['header-label'] }"
      >
        {{ opts.locale["Before/After"] }}
        <el-select name="Before/After" v-model="scope" @change="handleScopeChange" size="mini" style="width:100px">
          <el-option :value="17+2+2*arr[scale].index" label="窄">窄</el-option>
          <el-option :value="17+1+arr[scale].index" label="较窄">较窄</el-option>
          <el-option :value="17" label="适中">适中</el-option>
          <el-option :value="17-1-arr[scale].index" label="较宽">较宽</el-option>
          <el-option :value="17-2-2*arr[scale].index" label="宽">宽</el-option>
        </el-select>
      </label>
      <!-- <label
        class="gantt-elastic__header-label"
        :style="{ ...style['header-label'] }"
      >
        {{ opts.locale["Before/After"] }}
        <div
          class="gantt-elastic__header-slider-wrapper"
          :style="{ ...style['header-slider-wrapper'] }"
        >
          <vue-slider
            class="gantt-elastic__header-slider"
            tooltip="none"
            :style="{ ...style['header-slider'] }"
            :process-style="{ ...style['header-slider--process'] }"
            :slider-style="{ ...style['header-slider--slider'] }"
            v-model="scope"
            :max="100"
            :min="0"
            width="100px"
          ></vue-slider>
        </div>
      </label> -->
      <!-- <label
        class="gantt-elastic__header-label"
        :style="{ ...style['header-label'] }"
      >
        {{ opts.locale["Task list width"] }}
        <div
          class="gantt-elastic__header-slider-wrapper"
          :style="{ ...style['header-slider-wrapper'] }"
        >
          <vue-slider
            class="gantt-elastic__header-slider"
            tooltip="none"
            :style="{ ...style['header-slider'] }"
            :process-style="{ ...style['header-slider--process'] }"
            :slider-style="{ ...style['header-slider--slider'] }"
            v-model="divider"
            :max="100"
            :min="0"
            width="100px"
          ></vue-slider>
        </div>
      </label> -->
      <label
        class="gantt-elastic__header-task-list-switch--wrapper"
        :style="{ ...style['header-task-list-switch--label'] }"
      >
        {{ opts.locale["Display task list"] }}
        <el-switch
          v-model="root.state.options.taskList.display"
        ></el-switch>
      </label>
    </div>
  </div>
</template>

<script>
import vueSlider from "vue-slider-component";
import "vue-slider-component/theme/default.css";
import Switches from "vue-switches";
import dayjs from 'dayjs';

var quarterOfYear = require('dayjs/plugin/quarterOfYear')
dayjs.extend(quarterOfYear)
var advancedFormat = require('dayjs/plugin/advancedFormat')
dayjs.extend(advancedFormat)
var weekOfYear = require('dayjs/plugin/weekOfYear')
dayjs.extend(weekOfYear)
const defaultStyle = {
  header: {
    margin: "0px auto",
    background: "#f3f5f747",
    padding: "10px",
    overflow: "hidden",
    clear: "both",
    display: "flex",
    "justify-content": "space-between"
  },
  "header-title": { float: "left" },
  "header-options": { float: "right" },
  "header-title--text": {
    "font-size": "20px",
    "vertical-align": "middle",
    "font-weight": "400",
    "line-height": "35px",
    "padding-left": "22px",
    "letter-spacing": "1px"
  },
  "header-title--html": {
    "font-size": "20px",
    "vertical-align": "middle",
    "font-weight": "400",
    "line-height": "35px",
    "padding-left": "22px",
    "letter-spacing": "1px"
  },
  "header-btn-recenter": {
    background: "#95A5A6",
    border: "none",
    outline: "none",
    cursor: "pointer",
    color: "white",
    "border-radius": "3px",
    "margin-right": "27px",
    "font-size": "16px",
    padding: "8px 12px"
  },
  "header-slider": {
    "box-sizing": "content-box"
  },
  "header-slider-wrapper": {
    display: "inline-block",
    "vertical-align": "middle"
  },
  "header-slider--slider": { "box-sizing": "content-box" },
  "header-slider--process": { "box-sizing": "content-box" },
  "header-task-list-switch--label": { "box-sizing": "content-box" },
  "header-task-list-switch": {
    margin: "0px 15px",
    "vertical-align": "middle"
  },
  "header-label": {}
};
const defaultOptions = {
  title: {
    label: "gantt-elastic",
    html: false
  },
  locale: {
    Now: "Now",
    "X-Scale": "Zoom-X",
    "Y-Scale": "Zoom-Y",
    "Task list width": "Task list",
    "Before/After": "Expand",
    "Display task list": "Show task list"
  }
};
export default {
  name: "GanttHeader",
  components: {
    vueSlider,
    Switches
  },
  props: ["options", "dynamicStyle"],
  inject: ["root"],
  data() {
    return {
      scaleTimeoutId: null,
      firstScale: false,
      localScale: 0,
      localHeight: 0,
      localBefore: 0,
      localPercent: 0,
      sliderOptions: {
        xScale: {
          value: 0
        }
      },
      style: {},
      scale: 'week',
      scope: 17,
      opts: {},
      arr: {
        day: {
          value: 1,
          format: {
            long(date) {
              return date.format('DD dddd');
            },
            medium(date) {
              return date.format('DD ddd');
            },
            short(date) {
              return date.format('DD');
            }
          },
          index: 1},
        week: {
          value: 7,
          format: {
            long(date) {
              return date.format('DD-')+dayjs(date).add(6,'day').format('DD wo周');
            },
            medium(date) {
              return date.format('D-')+dayjs(date).add(6,'day').format('D wo周');
            },
            short(date) {
              return date.format('D-')+dayjs(date).add(6,'day').format('D wo');
            }
          },
          index: 2},
        month: {
          value: 30,
          format: {
            //*
            short(date) {
              return date.format('MM');
            },
            medium(date) {
              return date.format("MMM / YY");
            },
            long(date) {
              return date.format('MMMM / YYYY');
            }
          },
          index: 3},
        quarter: {
          value: 90,
          format: {
            //*
            short(date) {
              return date.format('M-')+dayjs(date).add(2,'month').format('M<br>Q');
            },
            medium(date) {
              return date.format('M-')+dayjs(date).add(2,'month').format('M/YYYY <br>第Q[季度]');
            },
            long(date) {
              return date.format('MM-')+dayjs(date).add(2,'month').format('MM/YYYY <br>第Q[季度]');
            }
          },
          index: 2},
        year: {
          value: 365,
          index: 5}
      }
    };
  },
  created() {
    this.localScale = this.root.state.options.times.timeZoom;
    this.localHeight = this.root.state.options.row.height;
    this.localBefore = this.root.state.options.scope.before;
    this.localPercent = this.root.state.options.taskList.percent;
    this.sliderOptions.xScale.value = this.root.state.options.times.timeZoom;
    this.style = this.root.mergeDeep({}, defaultStyle, this.dynamicStyle);
    this.opts = this.root.mergeDeep({}, defaultOptions, this.options);
  },
  methods: {
    getImage() {
      this.root.getImage("image/png").then(imgB64 => {
        const link = document.createElement("a");
        link.href = imgB64;
        link.download = "gantt-elastic.png";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    },
    recenterPosition() {
      this.root.$emit("recenterPosition");
    },
    // setScale(value) {
    //   if (this.scaleTimeoutId !== null) {
    //     clearTimeout(this.scaleTimeoutId);
    //     this.scaleTimeoutId = null;
    //   }
    //   // debouncing
    //   if (this.firstScale) {
    //     this.scaleTimeoutId = setTimeout(() => {
    //       this.root.$emit("times-timeZoom-change", value);
    //       this.scaleTimeoutId = null;
    //     }, 50);
    //   } else {
    //     this.root.$emit("times-timeZoom-change", value);
    //     this.firstScale = true;
    //   }
    // },
    handleScaleChange(value){
      this.root.state.options.times.timeScale = 60 * 1000 * this.arr[value].value
      this.root.state.options.times.stepDuration = value
      this.scope = 17
      if(value=='day'||value=='week'){
        this.root.state.options.calendar.day.display = true
        this.root.state.options.calendar.day.format = this.arr[value].format
        this.root.state.options.calendar.month.format = this.arr['month'].format
        this.root.state.options.calendar.month.height = 20
      }else{
        this.root.state.options.calendar.day.display = false
        this.root.state.options.calendar.month.format = this.arr[value].format
        this.root.state.options.calendar.month.height = 40
      }
      this.root.$emit("times-timeZoom-change", 17);
      this.root.$emit("scope-change", value=='day'?1:0)
    },
    handleScopeChange(value){
      this.root.$emit("times-timeZoom-change", value);
    }
  },
  computed: {
    /**
     * If there is a component slot specified for header
     * @returns {bool}
     */
    beforeOptionsIsComponent() {
      const headerSlot = this.options.slots.header;
      if (
        typeof headerSlot.beforeOptions === "object" &&
        !Array.isArray(headerSlot.beforeOptions)
      ) {
        return true;
      }
      return false;
    },
    /**
     * If there is a slot with beforeOptions html content
     * @returns {bool}
     */
    beforeOptionsIsHtml() {
      if (typeof this.options.slots.header.beforeOptions === "string") {
        return true;
      }
      return false;
    },
    // scale: {
    //   get() {
    //     return this.localScale;
    //   },
    //   set(value) {
    //     this.localScale = Number(value);
    //     this.setScale(this.localScale);
    //   }
    // },
    height: {
      get() {
        return this.localHeight;
      },
      set(value) {
        this.localHeight = Number(value);
        this.root.$emit("row-height-change", Number(value));
      }
    },
    // scope: {
    //   get() {
    //     return this.localBefore;
    //   },
    //   set(value) {
    //     this.localBefore = Number(value);
    //     this.root.$emit("scope-change", Number(value));
    //   }
    // },
    divider: {
      get() {
        return this.localPercent;
      },
      set(value) {
        this.localPercent = Number(value);
        this.root.$emit("taskList-width-change", Number(value));
      }
    }
  }
};
</script>
